<template>
    <div>
        <div style='font-size: 12px;color: rgb(255 33 33);margin-bottom: 15px;'>
            目前因为用户系统还未正常使用，所有的评论都按游客处理，站长会尽快更新用户系统来完善网站的
        </div>
        <!-- 输入框 -->
        <div class='inputBox'>
            <!-- 头像 -->
            <div class='flexSh'>
                <img class='inputBoxIcon' :src='localhost + (user.images || "/img/logo.png")' />
            </div>
            <!-- 输入框 -->
            <div style='width:100%;'>
                <textarea class='infoText' v-model="info"></textarea>
            </div>
            <!-- 发表评论 -->
            <div class='flexSh' @click='addVideoComment()'>
                <div class='btnFaB' :class='{isStop:updateComment}'>发表评论</div>
            </div>
        </div>
        <!-- 评论列表 -->
        <div class='conmentList'>
            <div class='conmentBox' v-for='( it , i ) in comment' :key='i'>
                <!-- 头像 -->
                <div class='conmentIcon'>
                    <img class='inputBoxIcon' :src='localhost + (it.images || "/img/logo.png")' />
                </div>
                <!-- 右边 -->
                <div class='conmentRight'>
                    <div class='conmentName'>
                        <span>{{it.name}}</span>
                    </div>
                    <div class='conmentText'>
                        <span>{{it.info}}</span>
                    </div>
                    <!-- 数据 -->
                    <div class='conmentDate'>
                        <span>{{it.createTime.split("T")[0]}}</span>
                        <span>{{it.createTime.split("T")[1].split(".")[0]}}</span>
                        <span @click='addVideoCommentTo(it)' class='huifuBtn'>回复</span>
                    </div>
                    <!-- 回复列表 -->
                    <div class='conmentReplyList'>
                        <div class='conmentReply' v-for='(its, i) in it.children' :key='i'>
                            <div class='conmentReplyHead'>
                                <img class='inputBoxIconSmall' :src='localhost + (it.images||"/img/logo.png")' />
                            </div>
                            <div class='conmentReplyBody'>
                                <div class='conmentReplyBodyText'>
                                    <span class='conmentReplyBodyTextName'>{{its.name}}</span>
                                    <span class=''>{{its.info}}</span>
                                </div>
                                <div class='conmentReplyBodyDate'>
                                    <span>{{its.createTime.split("T")[0]}}</span>
                                    <span>{{its.createTime.split("T")[1].split(".")[0]}}</span>
                                    <!-- <span @click=''>回复</span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { localhost } from '@/api/config.js'
import { getVideoComment, addVideoComment } from '@/api/comment.js'
import { mapGetters } from "vuex"
export default {
    computed: {
        ...mapGetters(["user"])
    },
    props: {
        video_id: {
            type: Number,
            default: 0
        }
    },
    data(){
        return {
            comment: [],
            id: null,
            info: "",
            localhost: localhost,
            updateComment: false
        }
    },
    mounted (){
        this.getVideoComment(this.video_id);
    },
    methods: {
        getVideoComment (id){
			// 获取评论接口
			getVideoComment({video_id: id}).then((e)=>{
                if( e.data.code == 200 ){
                    var data = e.data.data;
                    data.forEach((e)=>{ e.children = []; });
                    var data1 = [];
                    // 首先确定第一层回复
                    data1 = data.filter((e)=>{ return !e.toComment });
                    // 然后为每一层回复做转发
                    data1.forEach((e1)=>{
                        // 通过匹配id来获取
                        e1.children = data.filter((e)=>{ return e.toComment == e1.id });
                    })
                    // 赋值
                    this.comment = data1;
                }else{
                    this.$message({
                        type: "error",
                        message: e.data.msg || "评论加载失败"
                    })
                }
			})
        },
        
        addVideoComment (){
            if( this.updateComment ){
                return;
            }
            this.updateComment = true;
            addVideoComment({
                video_id: this.video_id,
                user_id: this.user.id, //目前默认为游客
                // toComment: param.toComment,
                info: this.info
            }).then((e)=>{
                this.updateComment = false;
                if( e.data.code == 200 ){
                    this.$message({
                        type: "success",
                        message: "评论成功"
                    })
                    this.comment.push({
                        video_id: this.video_id,
                        user_id: this.user.id, //目前默认为游客
                        name: this.user.name,
                        images: this.user.images,
                        toComment: undefined,
                        info: this.info,
                        createTime: this.getTime()
                    })
                    this.info = "";
                }else{
                    this.$message({
                        type: "error",
                        message: e.data.msg || "评论失败"
                    })
                }
            })
        },

        addVideoCommentTo (comment){
            var commentId = comment.id
            var id = this.video_id;
            this.$prompt('输入回复', '提示', {
                confirmButtonText: '回复',
                cancelButtonText: '取消',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                // inputErrorMessage: '邮箱格式不正确'
            }).then(({ value }) => {
                addVideoComment({
                    video_id: id,
                    user_id: this.user.id, //目前默认为游客
                    toComment: commentId,
                    info: value
                }).then((e)=>{
                    if( e.status == 200 ){
                        this.$message({
                            type: "success",
                            message: "回复成功"
                        })
                        comment.children.push({
                            video_id: id,
                            user_id: this.user.id, //目前默认为游客
                            name: this.user.name,
                            images: this.user.images,
                            toComment: commentId,
                            info: value,
                            createTime: this.getTime()
                        })
                    }else{
                        this.$message({
                            type: "error",
                            message: "回复失败"
                        })
                    }
                })
            }).catch(() => {
                
            });
        },

        getTime (){
            var a = new Date()
            return a.getFullYear() + "-" + (a.getMonth()+1) +"-"+ a.getDate()+"T"+a.getHours()+":"+a.getMinutes()+":"+a.getSeconds();
        }
    }
}
</script>

<style scoped>
    
	.conmentReplyBody {
		margin-left: 12px;
	}
    .conmentReplyBodyTextName {
        color: #fb7299;
    }
    .conmentReplyBodyText {
        padding: 0 0 12px 0;
    }
    .conmentText {
        font-size: 12px;
        padding: 12px 0;
        /* text-indent: 2em; */
    }
    .conmentReplyBodyDate {
        color: #99a2aa;
    }
    .conmentName {
        color: #fb7299;
        font-size: 12px;
    }
    .conmentDate {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #99a2aa;
    }
    .conmentDate > span {
        padding: 3px;
    }
    .inputBox {
        display: flex;
        /* border-bottom: solid 2px #3d5c77;
        border-bottom: solid 2px #3d5c77; */
        margin-bottom: 15px;
    }
    .inputBoxIcon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: solid 3px #dea7ce;
        background: #f7f7f7;
        flex-shrink: 0;
    }
    .inputBoxIconSmall {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: solid 1px #dea7ce;
        padding: 2px;
    }
    .infoText {
        width: calc(100% - 50px);
        height: calc(100% - 32px);
        padding: 15px;
        margin-left: 10px;
        margin-top: 0px;
        border-radius: 4px;
        resize: none;
        border-color: #d6d6d6;
        outline-color: #3d5c77;
    }
    .btnFaB.isStop {
        background: #99a2aa;
        cursor: no-drop;
    }
    .btnFaB {
        padding: 15px;
        background: #3d5c77;
        border-radius: 4px;
        height: 45px;
        border: solid 1px #ffffff;
        color: #ffffff;
        font-size: 12px;
        line-height: 45px;
        cursor: pointer;
        transition: background 0.25s;
    }
    .btnFaB:hover {
        background: #0089ff;
    }
    .flexSh {
        flex-shrink: 0;
    }
    .conmentBox {
        display: flex;
    }
    .conmentReply {
        display: flex;
        padding: 12px 0;
        font-size: 12px;
    }
    .conmentRight {
        margin-left: 10px;
        border-top: solid 1px #cacfd6;
        padding-top: 15px;
        width: 100%;
    }
    
    .huifuBtn:hover {
        color:#dea7ce;
    }
    .huifuBtn {
        transition: all 0.25s;
        color:#095cf3;
        cursor: pointer;
    }

</style>